<template>
  <view class="pinyin-container" :class="varClass">
    <view class="pinyin-item" v-for="(item, index) in processedPairs" :key="index">
      <text class="item-pin">{{ item.pinyin }}</text>
      <text class="item-char">{{ item.character }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
// import pinyin from 'pinyin';

interface CharacterPair {
  character: string;
  pinyin: string;
}


const props = withDefaults(
  defineProps<{
    character: string;
    varClass?: string;
  }>(),
  {
    character: "测试",
    varClass: 'default-class', // 默认值
  }
)

const processedPairs = computed<CharacterPair[]>(() => {
  return Array.from(props.character).map(char => ({
    character: char,
    pinyin: '1234', // pinyin(char, { style: pinyin.STYLE_TONE })[0][0]
  }));
});

</script>

<style lang="scss">
@import '@/styles/style-variables.scss';

.pinyin-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .pinyin-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .item-pin {
      color: $font-h-color;
      font-size: 14rpx;
      text-align: center;
      padding-left: 2rpx;
    }

    .item-char {
      color: $font-title-color;
      font-size: $font-medium-size;
    }
  }
}
</style>